<template>
  <div class="bk-exception bk-exception-center" v-show="show">
    <img :src="image">
    <template v-if="$slots.message">
      <slot name="message" />
    </template>
    <template v-else>
      <h2 class="exception-text">{{ message }}</h2>
    </template>
  </div>
</template>

<script>
/**
 *  app-exception
 *  @desc 异常页面
 *  @param type {String} - 异常类型，有：404（找不到）、403（权限不足）、500（服务器问题）、building（建设中）
 *  @param delay {Number} - 延时显示
 *  @param text {String} - 显示的文案，默认：有：404（页面找不到了！）、403（Sorry，您的权限不足）、500（）、building(功能正在建设中···)
 *  @example1 <app-exception type="404"></app-exception>
 */
import img403 from '@/images/403.png';
import img404 from '@/images/404.png';
import img500 from '@/images/500.png';
import imgBuilding from '@/images/building.png';

export default {
  name: 'AppException',
  props: {
    type: {
      type: String,
      default: '404',
    },
    delay: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: '',
    },
  },
  data() {
    let message = '';
    let image = '';

    switch (this.type) {
      case '403':
        image = img403;
        message = 'Sorry，您的权限不足！';
        break;

      case '404':
        image = img404;
        message = '页面找不到了！';
        break;

      case '500':
        image = img500;
        message = '服务器维护中，请稍后重试!';
        break;

      case 'building':
        image = imgBuilding;
        message = '功能正在建设中···';
        break;
    }

    if (this.text) {
      message = this.text;
    }

    return {
      show: false,
      message,
      image,
    };
  },
  created() {
    setTimeout(() => {
      this.show = true;
    }, this.delay);
  },
};
</script>
